import { Image, Text, View } from "@tarojs/components";

import { styled } from "@linaria/react";
import Taro from "@tarojs/taro";
import VoteBar from "@/components/VoteBar";
import { callContainerPost } from "@/tools/useCallContainer";

export default function DishItem({ dish, updateInfo }) {
  const {id, name, picture_url, price, queuing_time, vote, user_like} = dish

  const summitVote = (opt) => {
    callContainerPost(`/dishes/${ id }/users/_open_id/opt/${ opt }`)
    .then(() => updateInfo());
  }

  return (
    <DishItemView onClick={() => Taro.navigateTo({url: `/pages/dish/index?id=${id}`})}>
      <DishImage src={picture_url} mode="aspectFill" />
      <DishInfo>
        <DishName>{name}</DishName>
        <Spacer />
        <DishPrice>￥{price}</DishPrice>
        <DishTime>排队时间:{queuing_time} mins</DishTime>
      </DishInfo>
      <VoteBarWrapper>
        <VoteBar vote={vote} user_like={user_like} summitVote={summitVote} />
      </VoteBarWrapper>
    </DishItemView>
  )
}

const DishItemView = styled(View)`
  position: relative;
  margin: 20px 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
`;

const DishImage = styled(Image)`
  width: 150px;
  height: 150px;
  border-radius: 10px;
  margin-right: 10px;
`
const DishInfo = styled(View)`
  height: 150px;
  flex-grow: 1;

  display: flex;
  flex-direction: column;
`
const DishName = styled(Text)`
  font-size: 30px;
  font-weight: bold;
`

const Spacer = styled(View)`
  flex-grow: 1;
`

const DishPrice = styled(Text)`
  font-size: 25px;
  font-weight: bold;
`

const DishTime = styled(Text)`
  font-size: 20px;
  font-weight: bold;
`

const VoteBarWrapper = styled(View)`
  position: absolute;
  bottom: 0px;
  right: 10px;
`